<template>
  <div class="box">
    <div class="top">
      <div class="top_lef">
        <h1>今天,</h1>
        <p>
          2021年6月27日周日,欢迎您回到后台操作系统,累计售出59件商品,继续加油~
        </p>
      </div>
      <div class="top_rig">
        <router-link to="/commodity_1">
          <div>
            <p class="el-icon-cloudy-and-sunny"></p>
            <dl>
              <dt>25</dt>
              <dd>待入库</dd>
            </dl>
          </div>
        </router-link>
        <router-link to="/after">
          <div>
            <p class="el-icon-document"></p>
            <dl>
              <dt>17</dt>
              <dd>待审核</dd>
            </dl>
          </div>
        </router-link>
        <router-link to="/finance">
          <div>
            <p class="el-icon-s-finance"></p>
            <dl>
              <dt>19191</dt>
              <dd>待提现</dd>
            </dl>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  // height: 2000px;  
  // margin-left: 20px;
  // background-color: burlywood;
  .top {
    display: flex;
    height: 100px;
    // background-color: cadetblue;
    justify-content: space-between;
    box-shadow: 0px 0px 5px #ddd;
    padding: 0 20px;
    //   display: flex;
    .top_lef {
      flex: 3;
      text-align: left;
      padding-top: 10px;
      font-size: 22px;
      p {
        margin: 10px 0;
        font-size: 14px;
      }
    }
    .top_rig {
      display: flex;
      flex: 1;
      align-items: center;
      a{
        color: rgb(26, 24, 24);
      }
      div {
        font-size: 30px;
        display: flex;
        dl {
          margin: 0 10px;
          font-size: 10px;
          dt {
            font-size: 20px;
          }
        }
        border-bottom: 5px solid transparent;
      }
      div:hover {
        border-bottom: 5px solid grey;
      }
    }
  }
}
</style>


